 <!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>二手车检测报告查询</title> 
    <link rel="shortcut icon" href="favicon.ico">
	<#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <link href="${WEB_PATH}/resources/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <style>
    	.demo1:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "条件查询：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo1 {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.carInfo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "车主信息：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.carInfo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.car:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "车辆信息：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.car {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		} 
		.Jcjg:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测结果";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.Jcjg {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		} 
		.tsorg:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测站信息：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.tsorg {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		} 
		.shimage:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测过程图片：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.shimage {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		}
    </style> 
</head>

<body class="gray-bg"> 
    <div class="wrapper wrapper-content  animated fadeInRight"> 
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5><font id="ssbm_name"></font>二手车报告查询</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">  
                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap"> 
                            <div class="example"> 
                                <div class="zero-clipboard">
				            	    <div class="btn-clipboard">
				                       	<button type="button" class="btn btn-danger btn-xs" id="RQueryParams" ><i class="fa fa-table"></i>&nbsp;重置查询条件</button>
				                    </div> 
								</div>
                            	<div style="" class="demo1 ui-sortable">
                            		 <div class="row" style="padding-bottom: 10px;"> 
                            		    <#if USER.userType != "jcjg">
                            		 	<div class="col-sm-3">
			                                 <div class="form-group">
						                        <label>所属组织部门：</label>
						                         <div class="input-group colorpicker-demo2 colorpicker-element">
								                    <input id="organizationName" name="organizationName" class="form-control dropdown-toggle" readonly type="text" placeholder="请选择组织部门"    style="background-color: #fff;" >
								            		<input id="organizationId" name="organization.ID"  type="hidden"    >
								            		<input id="organization_code" name="organization_code"  type="hidden"   >
								                	<span class="dropdown-toggle input-group-addon  btn btn-white btn-bitbucket" data-toggle="dropdown" id="organization"><i class="fa fa-user-md"></i></span>
								                	<div class="dropdown-menu m-t-xs pull-right" id="organization_tree" style="width: 100%;">
								                        <div id="organizationTree" style="padding: 10px;height:300px;overflow-y:scroll;"></div>
								                    </div>
								                </div>
											</div>
			                            </div>
                            		 	<div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>检测站：</label>
            									<select data-placeholder="选择所属检验机构" id="tsorganizationInfoId" name="tsorganizationInfoId"  class="chosen-select form-control" >
								                   <option  value="" hassubinfo="true" ></option>
								                   <@tsorganizationInfos>
								                       <#list tsorganizationInfos as tsorganizationInfo >
													       <option value="${tsorganizationInfo.JYJGBH}" hassubinfo="true">${tsorganizationInfo.JYJGMC}</option>
													   </#list>
												   </@tsorganizationInfos>
												</select>
			                                </div>
			                            </div>
			                            </#if>
			                            <div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>车牌号码：<span style="color: red;">(支持模糊查询)</span></label>
            									<input id="HPHM" name="HPHM" class="form-control"  type="text" placeholder="请输入号牌号码"> 
			                                </div>
			                            </div>
			                            <div class="col-sm-3" style="padding-top: 22px;">
			                                 <button type="button" class="btn btn-primary" id="search"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</button>
			                            </div> 
			                        </div>
			                        <div class="row">
			                        	<div class="col-sm-3">
			                                <div class="form-group">
			                                     <label>判断结果：</label>
						                         <select data-placeholder="选择判断结果" id="ZZPDJG" name="ZZPDJG"  class="chosen-select form-control">
						                            <option value="" hassubinfo="true" selected="selected">全部</option>
												    <option value="1" hassubinfo="true">通过</option>
				                                    <option value="0" hassubinfo="true" >未通过</option>
										        </select>
			                                </div>
			                            </div>
			                        	<div class="col-sm-3">
			                                <div class="form-group">
			                                	<label>检测时间：</label>
				                                <div id="data">
				                                    <div class="input-daterange input-group" id="datepicker">
						                                <input type="text" class="input-sm form-control" name="start" id="start" value="" placeholder="选择查询开始时间"/>
						                                <span class="input-group-addon">到</span>
						                                <input type="text" class="input-sm form-control" name="end" id="end" value="" placeholder="选择查询结束时间"/>
						                            </div>
				                                </div>
			                                </div>
			                            </div>
			                        </div>
			                    </div>
                                <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                	<button type="button" class="btn btn-outline btn-default" data-toggle="modal" id="printBg" >
                                        <i class="iconfont" style="font-size:14px;font-style:normal;" >&#xe626;</i>&nbsp;&nbsp;查看报告
                                    </button>
                                </div>
                                <table id="exampleTableEvents"  data-mobile-responsive="true" >
                                    <thead>
                                        <tr>
                                            <th data-field="state" data-radio="true"></th>  
                                            <th data-field="ID" data-visible = "false" >id</th>  
								            <th data-field="HPHM" data-align="center">车牌号码</th> 
								            <th data-field="CJH" data-align="center">车辆识别码（VIN）</th> 
								            <th data-field="CZXM" data-align="center">车主/单位</th>  
								            <th data-field="SSBMMC" data-align="center">组织机构</th>  
								            <th data-field="JYJGMC" data-align="center">检测机构</th>  
								            <th data-field="JCXMC" data-align="center">检测线名称</th> 
								            <th data-field="BGMC" data-align="center" >报告名称</th>
								            <th data-field="JCJSSJ" data-align="center" data-formatter="formatTime" >检测时间</th>
								            <th data-field="ZZPDJG" data-align="center" data-formatter="formatZzpdjg">判定结果</th> 
								            <th data-field="CZ" data-width="150" data-align="center" data-formatter="formatCz">操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- End Example Events -->
                    </div>
                </div>
            </div>
        </div> 
    </div> 
    <div id="win_add"></div>
    <@import.tableManagerImportScript/>
    <script src="${WEB_PATH}/resources/js/plugins/jsTree/jstree.min.js"></script>
    <script src="${WEB_PATH }/resources/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/datapicker/bootstrap-datepicker.js"></script>
	<script src="${WEB_PATH}/resources/js/plugins/switchery/switchery.js"></script>
    <script src="${WEB_PATH }/resources/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="${WEB_PATH }/resources/js/popwin.js"></script>
    
    <script >
    	$("#data .input-daterange").datepicker({
	        keyboardNavigation: !1,
	        forceParse: !1,
	        autoclose: !0
	    }); {
	        var i = document.querySelector(".js-switch"),
	        t = (new Switchery(i, {
	            color: "#1AB394"
	        }), document.querySelector(".js-switch_2")),
	        a = (new Switchery(t, {
	            color: "#ED5565"
	        }), document.querySelector(".js-switch_3"));
	        new Switchery(a, {
	            color: "#1AB394"
	        })
	    } 
	    $("#start").change(function(){
	    	var end = $("#end").val();
	    	var start = $("#start").val();
	    	if(end == null || "" == end){
	    		$("#end").val(start);
	    	}else{
	    		var end1 = end.replace("-","");
	    		var start1 = start.replace("-","");
	    		if(end1 < start1){
	    			$("#end").val(start);
	    		}
	    	}
	    });
	    $("#end").change(function(){
	    	var end = $("#end").val();
	    	var start = $("#start").val();
	    	if(start == null || "" == start){
	    		$("#start").val(end);
	    	}else{
	    		var end1 = end.replace("-","");
	    		var start1 = start.replace("-","");
	    		if(end1 < start1){
	    			$("#start").val(end);
	    		}
	    	}
	    });
    	$(function(){
    		$(window).resize(function () {
		        $('#exampleTableEvents').bootstrapTable('resetView');
		    }); 
		    <#if USER.userType != "jcjg">
		    $("#tsorganizationInfoId").chosen({width:'100%'}); 
		    $("#organization").on("click",function(){
				var display =$('#organization_tree').css('display');
				if(display == 'none'){
				  $("#organization_tree").show();
				}else{
				  $("#organization_tree").hide();
				}
			});
			
			$('#organizationTree').jstree({'core' : {
				 'data': ${json}
			}}).bind("loaded.jstree", function () {
	        }).bind('changed.jstree', function(event,data) {
	           $("#organizationName").val(data.node.text);
		       $("#organizationId").val(data.node.original.id);
		       $("#organization_code").val(data.node.original.qcode);
		       $("#organization_tree").hide();
		    });
		    </#if>
		    $("#JCJSSJ").datepicker({
		        keyboardNavigation: !1,
		        forceParse: !1,
		        autoclose: !1
		    });
		    function queryParams(params) {
		        var temp = {  
			        limit: params.limit,  
			        offset: params.offset,  
			        JCJSSJ:$("#JCJSSJ").val(),
			        HPHM:$("#HPHM").val(),
			        SFESC:1,
			        <#if USER.userType != "jcjg">
			        SSBMCODE:$("#organization_code").val(),
			        JYJGBH:$("#tsorganizationInfoId").val(),
			        </#if> 
			        startTime:$("#start").val(),
		        	endTime:$("#end").val(),
			        search:params.search,
			        maxrows: params.limit,
			        pageindex:params.pageNumber,
		        };
		        return temp;
			}
    		//加载table数据
	    	$("#exampleTableEvents").bootstrapTable({
	            url: "${WEB_PATH}/ports/report/getPage.do",
	            method: 'get',
	            pagination:true,
	            pageNumber:1,  
	            pageSize:10,   
	            detailView:true,
	            iconSize: "outline",
	            toolbar: "#exampleTableEventsToolbar",
	            sidePagination: "server", //设置为服务器端分页
	            queryParams: queryParams,//参数
	            minimumCountColumns: 1, 
	            clickToSelect: true,  
	            onExpandRow:subTableFormatter,
	            rowStyle:rowStyle,
	            onCheck:onClickContacts
	        });
	        $('input.form-control.input-outline').attr("placeholder","请输入检测机构名称/编号/组织机构号"); //设置搜索提示信息
	        
        });
         //点击查询搜索
		$("#search").click(function(){
			$("#exampleTableEvents").bootstrapTable('refresh');
		});
		//点击打印
		$("#printBg").click(function(){ 
			 var selectRow = $("#exampleTableEvents").bootstrapTable('getSelections');
        	 var bg = selectRow[0]; 
        	 if(1 != selectRow.length){
			    layer.msg('请选择您需要打印的报告信息！', {icon: 5}); 
			    return ;
	       	 } 
			 openPrit(bg.HPHM,bg.BGMC,bg.JCBH);
		}); 
		
		//重置查询条件
		$("#RQueryParams").click(function(){ 
			 $("#JCJSSJ").val("");
			 $("#HPHM").val("");
			 $("#organization_code").val("");
			 $("#organizationName").val("");  
			 $("#tsorganizationInfoId").val('').trigger("chosen:updated");
		}); 
		
		function subTableFormatter(index, row, $detail){
			var info = $detail.html('<div id="info"></div>').find('#info');
			info.load("${WEB_PATH}/ports/report/detail.do?id="+row.ID); 
		}
		
		Date.prototype.Format = function(fmt){ //author: meizz   
		  var o = {   
		    "M+" : this.getMonth()+1,                 //月份   
		    "d+" : this.getDate(),                    //日   
		    "h+" : this.getHours(),                   //小时   
		    "m+" : this.getMinutes(),                 //分   
		    "s+" : this.getSeconds(),                 //秒   
		    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
		    "S"  : this.getMilliseconds()             //毫秒   
		  };   
		  if(/(y+)/.test(fmt))   
		    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
		  for(var k in o)   
		    if(new RegExp("("+ k +")").test(fmt))   
		  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		  return fmt;   
		}
		
		Date.prototype.format = function (fmt) { //author: meizz  
		    var o = {  
		      "M+": this.getMonth() + 1, //月份  
		      "d+": this.getDate(), //日  
		      "h+": this.getHours(), //小时  
		      "m+": this.getMinutes(), //分  
		      "s+": this.getSeconds(), //秒  
		      "q+": Math.floor((this.getMonth() + 3) / 3), //季度  
		      "S": this.getMilliseconds() //毫秒  
		    };  
		    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
		    for (var k in o)  
		      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
		    return fmt;  
		  }  
		
		function formatTime(val){
		 	var tt=new Date(val).Format("yyyy-MM-dd hh:mm:ss");
    		return tt; 

		}
		
		function formatZzpdjg(val){
			var tt = '';
		 	if(val == "1"){
		 	   tt = '<span class="label label-primary">通过</span>';
		 	}else{
		 	   tt = '<span class="label label-danger">未通过</span>';
		 	}
		 	return  tt;
		}
		
		function formatCz(index, row, element){
    		var tt = '';
			if(row.JCXXZT != 2){
		 	 	tt= '<button class="btn btn-outline btn-success btn-xs" type="button" jcxxbh = "'+row.JCBH+'" jccph = "'+row.HPHM+'" jcbgmc = "'+row.BGMC+'" onClick="Print(this);"><i class="iconfont" style="font-size:14px;font-style:normal;">&#xe631;</i>查看</button>';
		 	}else{
		 		tt= '<button type="button" id="'+row.ID+'" class="btn btn-outline btn-danger btn-xs" jcxxbh = "'+row.JCBH+'" jccph = "'+row.HPHM+'" jcbgmc = "'+row.BGMC+'" onClick="Print(this);"><i class="iconfont" style="font-size:14px;font-style:normal;">&#xe630;</i>预警</button>';
		 	} 
		 	if((row.SPWJMC != "" && row.SPWJMC != null) || (row.SPWJMCH != "" && row.SPWJMCH != null)){
		 		tt += '<button class="btn btn-outline btn-danger btn-xs" style="margin-left:5px;"  type="button" jcxxbh = "'+row.JCBH+'" jccph = "'+row.HPHM+'" jcbgmc = "'+row.BGMC+'" jcxxzt="'+row.JCXXZT+'" onClick="Viedo(this);"><i class="glyphicon glyphicon-play-circle" style="font-size:14px;font-style:normal;" ></i>播放</button>';
		 	}
    		return tt; 
		}
		
		function Print(obj){
		     var cph = obj.getAttribute('jccph');
		     var jcbgmc = obj.getAttribute('jcbgmc');
		     var jcxxbh = obj.getAttribute('jcxxbh');
		     openPrit(cph,jcbgmc,jcxxbh);
		}
		
		function Viedo(obj){
		     var cph = obj.getAttribute('jccph');
		     var jcbgmc = obj.getAttribute('jcbgmc');
		     var jcxxbh = obj.getAttribute('jcxxbh');
			 popWin.showWin("1200","600",'<span style="color: #ed5565">【'+cph+'】车辆检测回放视频</span>',"${WEB_PATH }/ports/report/viedoIndex.do?jcbh="+jcxxbh);
		}
		
		function openPrit(cph,jcbgmc,jcxxbh){
			layer.open({
			      type: 2,
			      title: '【号牌号码：'+cph+'】------<font color="red">'+jcbgmc+'</font>',
			      shadeClose: false, 
			      shade: 0.3,
			      maxmin: false, //开启最大化最小化按钮
			      area: ['98%', '90%'],
			      content: "${WEB_PATH }/ports/report/query.do?jcxxbh="+jcxxbh,
			      btn: ['确定'],
			      yes: function(index, layero){
				      layer.closeAll();
				  } 
			});
		}
		
		function rowStyle(row, index) {
	         if(row.JCXXZT == 2){
	         	return { classes: 'danger' };
	         }else{
	         	return {};
	         }
	    }
	    
	    function onClickContacts(row, element){
			if(row.JCXXZT == 2){
				var row_id = "#"+row.ID;
				layer.tips("原因："+row.SDSHYY, row_id,{tips: [1, '#ec4758']}); 
			} 
		}
        
    </script>
</body>

</html>